<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true">

			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 20rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>
			
			<u-card margin="10rpx 30rpx" :show-foot="false" :show-head="false" @click="navTo('/pages/sys/msg/form')">
				<view class="item-body" slot="body">
					<view class="u-flex align-center justify-between u-m-b-20 ">
						<view class="u-flex-1 overflow-ellipsis text-bold">作业七对X0656</view>
						<u-tag mode="dark" text="已推送" type="success"></u-tag>
					</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="">sdfsdf石帆胜丰士大夫</view>
					<view class="u-text-right">2023-10-26</view>
				</view>
			</u-card>

		</scroll-view>
		
		<u-popup v-model="showFilter" border-radius="20" mode="right">
			<view class="filter-container">
				<view class="filter-body">
					<u-cell-group :border="false">
							<u-cell-item title="井号"></u-cell-item>
							<u-cell-item title="井别" value="新版本"></u-cell-item>
							<u-cell-item title="作业项目" value="新版本"></u-cell-item>
							<u-cell-item title="开工日期" value="新版本"></u-cell-item>
						</u-cell-group>
				</view>
				<view class="filter-footer u-flex">
					<u-button ripple shape="circle">重置</u-button>
					<u-button ripple shape="circle">取消</u-button>
					<u-button type="primary" ripple shape="circle">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keywords: '',
showFilter: false
			};
		},
		onLoad() {

		},
		onNavigationBarButtonTap() {
			console.log("......")
			this.showFilter = !this.showFilter
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>
<style lang="scss">
	@import '../../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}
	
	.scroll-list{
		padding: 10rpx 10rpx;
		box-sizing: border-box;
	}
	
	.filter-container{
		width: 90vw;
		height: 100%;
		display: flex;
		flex-direction: column;
	.filter-body{
		flex: 1;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.filter-footer{
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		.u-btn{
			width: 30%;
		}
	}
	}

</style>